<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度翻译</title>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="css/index.css">

</head>

<body>
  <div class="header">
  </div>
  <div id="app">
    <div class="main">
      <div class="opt">
        <div @click.prevent="fromLang" :class="{radiusChange:!isShow1}" class="from">
          <p><span v-text="from.name"></span>&nbsp;&nbsp;<i class="bi"
              :class="{'bi-chevron-down':isShow1,'bi-chevron-up':!isShow1}"></i></p>
        </div>
        <div class="collLeft" :style="{borderRadius:radius,display:show1}">
          <div class="common" @click.stop="selectCommon">
            <ul class="used">
              <li v-for="(item, index) in showLanglist" :id="item.code" :data-index="index"
                :class="{isSelected:isSelectedcommon==index,unSelected:unSelectedcommon===index}">{{item.name}}</li>
              <!-- <li v-for="(item, index) in commontoLangList" :id="item.code">{{item.name}}</li> -->
            </ul>
            <div class="search"><i class="bi bi-search"></i><input type="text" placeholder="搜索语言"></div>
          </div>
          <ul @click.stop="select" class="option">
            <li v-for="(item, index) in langdataList" :id="item.code" :data-index="index"
              :class="{isSelected:isSelected==index,unSelected:unSelected===index}">
              {{item.name}}</li>
          </ul>
        </div>
        <img src="./imgs/mutu1.svg" alt="" @click="mutu" :style="{transform:'scaleX(-1)'}">
        <div @click.prevent="toLang" :class="{radiusChange:!isShow2}" class="to">
          <p><span v-text="to.name"></span>&nbsp;&nbsp;<i class="bi"
              :class="{'bi-chevron-down':isShow2,'bi-chevron-up':!isShow2}"></i></p>
        </div>
        <div class="areaSelect" :class="{radiusChange:flagRight}">
          <p @click.stop.prevent="areaSelect">通用领域&nbsp;&nbsp;<i class=" bi"
              :class="{'bi-chevron-down':!flagRight,'bi-chevron-up':flagRight}"></i></p>
          <div class="collRight" :style="{borderRadius:radius,display:show2}">
            1123468
          </div>
        </div>

        <div class="immedTran">
          <p>立即翻译</p>
        </div>
      </div>

    </div>
    <div class="tran">
      <div class="enter">
        <textarea @input="fromContent" name="" id="" cols="" autofocus maxlength="5000" placeholder="输入文字、文档、网址或粘贴图片"
          v-model="fromCon" :style="{fontSize:fromfontsize}"></textarea>
        <div @click="fromCon='';fromfontsize='26px';" class="clear"><i class="bi bi-x-lg"></i>
          <p>清空</p>
        </div>
        <div class="footer">
          <a href="#" class="speak" data-bs-toggle="tooltip" data-bs-placement="top" title="发音"><i
              class="bi bi-volume-up"></i></a>
          <a href="#" class="favor" data-bs-toggle="tooltip" data-bs-placement="top" title="添加到收藏夹"><i
              class="bi bi-star"></i></a>
          <div>
            <!-- <p class="docTran">文档翻译<i class="bi bi-chevron-right"></i></p> -->
            <i class="bi bi-exclamation-circle" data-bs-toggle="tooltip" data-bs-placement="top"
              title="未登录用户单次翻译长度限制1000字符，一个汉字，英文字母，标点符号，空格均计为一个字符"></i>
            <p class="wordCount">{{fromCon.length}}/1000</p>
          </div>

        </div>
      </div>
      <!-- <input type="text" name="" id=""> -->
      <div class="res">
        <textarea @input="fromContent" name="" id="" cols="" autofocus maxlength="5000" placeholder="" v-model="toCon"
          :style="{fontSize:tofontsize}" disabled></textarea>
        <div class="footer">
          <a href="#" class="speak" data-bs-toggle="tooltip" data-bs-placement="top" title="发音"><i
              class="bi bi-volume-up"></i></a>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/md5.js"></script>
  <script src="js/index.js"></script>
  <script src="js/webpage.js"></script>
</body>

</html>